
<div class="dialog-areas" id="J_areas">
    <ul>
    <volist name="zone" id="vo">
        <li class="even">
          <dl class="ncsc-region">
            <dt class="ncsc-region-title">
            <span>
              <input type="checkbox" id="J_Group_{$vo['id']}" class="J_Group" value="">
              <label for="J_Group_{$vo['id']}">{$vo['name']}</label>
              </span> 
            </dt>
            <dd class="ncsc-province-list">
            <volist name="vo.province" id="prov">
              <div class="ncsc-province">
               <span class="ncsc-province-tab">
                <input type="checkbox" class="J_Province" <notempty name="prov.disabled"> disabled </notempty> <notempty name="prov.checked">checked="checked" </notempty> id="J_Province_{$prov.id}" value="{$prov.id}">
                <label for="J_Province_{$prov.id}">{$prov.sub_name}</label>
                <span class="check_num"><if condition='!empty($prov["count"])'>({$prov["count"]})</if></span><i class="icon-arrow-bottom icon J_city_show"></i>
                <div class="ncsc-citys-sub">
                  <volist name="prov.child" id="city">
                  <span class="areas">
                    <input type="checkbox" <notempty name="city.disabled"> disabled </notempty> <notempty name="city.checked">checked="checked" </notempty> class="J_City" name='set_zone[]'  value="{$city.id}">
                    <label for="J_City_{$city.id}">{$city.sub_name}</label>
                    <span class="check_num"></span>
                    <i class="icon-arrow-bottom icon J_zone_show"></i>
                    <!--增加的区-->
                
                    <div class="ncsc-citys-sub-area">
                    <foreach name="city.child" item="zone"> 
                      <span class="areas">
                      <input name='set_zone[]'  type="checkbox" class="J_Zone" <notempty name="zone.disabled"> disabled </notempty> <notempty name="zone.checked">checked="checked" </notempty> id="J_Province_{$zone.id}" value="{$zone.id}">
                        <label for="J_City_{$zone.id}">
                        {$zone.title}
                        </label>
                      </span> 
                    </foreach>
                      <p class="tr hr8">
                        <a href="javascript:void(0);" class="ncsc-btn-mini ncsc-btn-orange close_button J_zone_close">关闭</a>
                      </p>
                    </div>
               
                <!--区结束-->
                    
                    
                  </span>
                  </volist>
                  <p class="tr hr8">
                    <a href="javascript:void(0);" class="ncsc-btn-mini ncsc-btn-orange close_button J_city_close">关闭</a>
                  </p>
                </div>
                </span>
              </div>
              </volist>
            </dd>
          </dl>
        </li>
      </volist>
      </ul>
  </div>


<style>
showCityPop .ncsc-province-tab { background-color: #FFFEC6; margin: 0; border-style: solid; border-width: 1px 1px 0 1px; border-color: #F7E4A5 #F7E4A5 transparent #F7E4A5;}
.ncsc-citys-sub {background-color: #FFFEC6;white-space: normal;display: none;width: 345px;border: 1px solid #F7E4A5;position: absolute;z-index: 999;top: 28px;left: 0;padding: 5px 10px;}
.ncsc-citys-sub .areas {width: 94px;display: inline-block; position:relative;}
.showCityPop .ncsc-citys-sub  { font-size: 0; *word-spacing:-1px/*IE6、7*/; display: block;}
.ncsc-citys-sub .areas { font-size: 12px; line-height: 20px; vertical-align: middle; letter-spacing: normal; word-spacing: normal; display: inline-block; padding: 4px; margin-right: 4px; position:relative; }
.ncsc-citys-sub-area .areas { position: initial; width: auto}
.ncsc-citys-sub-area {background-color: #FFE8A3;white-space: normal;  display: none;  width: 240px;border:1px solid #FFBAA3;position: absolute;z-index: 999;top: 32px;left: 13px;padding: 5px 10px;}
</style>
<script type="text/javascript">

var curIndex = "{$no}";

function close(){
    // 移除J_message_box
    $('#J_load_box').animate({top: '-50%', opacity: '0.2'}, 300, function(){
    //移除J_loadbox
       $('#J_load_box').remove();
    });
    // 移除body样式
    $('body').removeClass('modal-open');
}

$(function(){
    // 如果省市全部选中，则区域也选中
    $('#J_areas ul li.even').each(function(){
        var inputLen = $(this).find('.ncsc-province-list input').size();
        var disableLen = $(this).find('.ncsc-province-list input:disabled').size();
        var checkedLen = $(this).find('.ncsc-province-list input:checked').size();
        if(disableLen == inputLen){
            $(this).find('.ncsc-region-title input').attr('disabled',true);
        }
        if(checkedLen == inputLen){
            $(this).find('.ncsc-region-title input').prop('checked',true);
        }
    });
    $('.J_close').on('click',function(){
        close();
        return false;
    });
    
    $('.J_city_show').on('click',function(){
        if ($(this).next().css('display') == 'none'){
            //隐藏所有已弹出的省份下拉层，只显示当前点击的层
            $('.ncsc-citys-sub').hide();
            $(this).next('.ncsc-citys-sub').show();
        }else{
            //隐藏当前的省份下拉层
            $('.ncsc-citys-sub').hide();
        }
    });
    // 市关闭
    $('.J_city_close').on('click',function(){
        $('.ncsc-citys-sub').hide();
    });
    // 区关闭
    $('.J_zone_close').on('click' , function () {
        $('.ncsc-citys-sub-area').hide();
    });
    $('.J_zone_show').click(function () {
        // $(this).next().toggle();
        if ($(this).next().css('display') == 'none'){
            //隐藏所有已弹出的省份下拉层，只显示当前点击的层
            $('.ncsc-citys-sub-area').hide();
            $(this).next('.ncsc-citys-sub-area').show();
        }else{
            //隐藏当前的省份下拉层
            $('.ncsc-citys-sub-area').hide();
        }
    })
    
    /*  大区域点击事件（华北、华东、华南...）*/
    $('#J_areas').on('click','.J_Group',function(){
        if ($(this).prop('checked')){
            //区域内所有没有被disabled复选框选中，带disabled说明已经被选择过了，不能再选
            $(this).parent().parent().parent().find('input[type="checkbox"]').each(function(){
                if (!$(this).attr('disabled')){
                    $(this).prop('checked',true);
                }else{
                    $(this).prop('checked',false);
                }
            });
            //循环显示每个省下面的市级的数量
            $(this).parent().parent().parent().find('.ncsc-province-list').find('.ncsc-province').each(function(){
                //显示该省下面已选择的市的数量
                num = '('+$(this).find('.ncsc-citys-sub').find('.J_City:checked').size()+')';
                //如果是0，说明没有选择，不显示数量
                if (num != '(0)'){
                    $(this).find(".J_Province").siblings('.check_num').html(num);
                }
            });
            //循环显示每个省下面的区级的数量
            $(this).parent().parent().parent().find('.ncsc-province-list').find('.ncsc-province').each(function(){
                //显示该省下面已选择的市的数量
                num = '('+$(this).find('.ncsc-citys-sub').find('.J_City:checked').size()+')';
                //如果是0，说明没有选择，不显示数量
                if (num != '(0)'){
                    $(this).find(".J_Province").siblings('.check_num').html(num);
                }
            });
        }else{
            //区域内所有筛选框取消选中
            $(this).parent().parent().parent().find('input[type="checkbox"]').prop('checked',false);
            //循环清空每个省下面显示的市级数量
            $(this).parent().parent().parent().find('.ncsc-province-list').find('.ncsc-province').each(function(){
                $(this).find(".check_num").html('');
            });
        }
    });
    
    
    /* 省份点击事件 */
    $('#J_areas').on('click','.J_Province',function(){
        if ($(this).prop('checked')){
            //选择所有未被disabled的子地区
            $(this).parent().find('.ncsc-citys-sub').eq(0).find('input[type="checkbox"]').each(function(){
                if (!$(this).attr('disabled')){
                    $(this).prop('checked',true);
                }else{
                    $(this).prop('checked',false);
                }
            });
            //计算并显示所有被选中的子地区数量
            num = '('+$(this).parent().find('.ncsc-citys-sub').find('.J_City:checked').size()+')';
            if (num == '(0)') num = '';
            $(this).siblings(".check_num").html(num);

            //如果该大区域所有省都选中，该区域选中
            input_checked   = $(this).parent().parent().parent().find('input:checked').size();
            input_all       = $(this).parent().parent().parent().find('input[type="checkbox"]').size();
            if (input_all == input_checked){
                $(this).parent().parent().parent().parent().find('.J_Group').prop('checked',true);
            }   

        }else{
            //取消全部子地区选择，取消显示数量
            $(this).parent().parent().find(".check_num").eq(0).html('');
            $(this).parent().find('.ncsc-citys-sub').eq(0).find('input[type="checkbox"]').prop('checked',false);
            //取消大区域选择
            $(this).parent().parent().parent().parent().find('.J_Group').prop('checked',false);
        }
    });
    
    
    /* 市级地区选择事件*/
    $('#J_areas').on('click','.J_City',function(){
        //显示选择市级数量，在所属省后面
        num = '('+$(this).parent().parent().find('.J_City:checked').size()+')';
        if (num=='(0)')num='';
        $(this).parent().parent().parent().find(".check_num").eq(0).html(num);
        //如果市级地区全部选中，则父级省份也选中，反之有一个不选中,则省份和大区域也不选中
        if (!$(this).prop('checked')){
            //取消省份选择
            $(this).parent().parent().parent().find('.J_Province').prop('checked',false);
            //取消大区域选择
            $(this).parent().parent().parent().parent().parent().parent().find('.J_Group').prop('checked',false);
            $(this).parent().find('.ncsc-citys-sub-area').find('input[type="checkbox"]').prop('checked',false);
        }else{

            $(this).parent().find('.ncsc-citys-sub-area').find('input[type="checkbox"]').each(function(){
                if (!$(this).attr('disabled')){
                    $(this).prop('checked',true);
                }else{
                    $(this).prop('checked',false);
                }
            });
            //如果该省所有市都选中，该省选中
            input_checked   = $(this).parent().parent().find('input:checked').size();
            input_all       = $(this).parent().parent().find('input[type="checkbox"]').size();
            if (input_all == input_checked){
                $(this).parent().parent().parent().find('.J_Province').prop('checked',true);
            }
            //如果该大区域所有省都选中，该区域选中
            input_checked   = $(this).parent().parent().parent().parent().parent().find('input:checked').size();
            input_all       = $(this).parent().parent().parent().parent().parent().find('input[type="checkbox"]').size();
            if (input_all == input_checked){
                $(this).parent().parent().parent().parent().parent().parent().find('.J_Group').prop('checked',true);
            }
        }
    });
    /* 区级地区选择事件*/
    $('#J_areas').on('click','.J_Zone',function(){
        //显示选择市级数量，在所属省后面
        num = '('+$(this).parent().parent().find('.J_Zone:checked').size()+')';
        if (num=='(0)')num='';
        $(this).parent().parent().parent().find(".check_num").html(num);
        //如果市级地区全部选中，则父级省份也选中，反之有一个不选中,则省份和大区域也不选中
        if (!$(this).prop('checked')){
           
            $(this).parent().parent().parent().find('.J_City').prop('checked',false);
            //取消大区域选择
            $(this).parent().parent().parent().parent().parent().find('.J_Province').prop('checked',false);
            $(this).parent().parent().parent().parent().parent().parent().parent().parent().find('.J_Group').prop('checked',false);
        }else{
            // 如果该市所有区都选中，该市选中
            input_checked   = $(this).parent().parent().find('.J_Zone:checked').size();
            input_all       = $(this).parent().parent().find('input[type="checkbox"]').size();
            if (input_all == input_checked){
                $(this).parent().parent().parent().find('.J_City').prop('checked',true);
            }
            // 如果该市所有市都选中，该省选中
            input_checked   = $(this).parent().parent().parent().parent().find('.J_City:checked').size();
            input_all       = $(this).parent().parent().parent().parent().find('.J_City').size();
            if (input_all == input_checked){
                $(this).parent().parent().parent().parent().parent().find('.J_Province').prop('checked',true);
            }
            // 如果该市所有省都选中，该大区选中
            input_checked   = $(this).parents('.ncsc-province-list').find('.J_Province:checked').size();
            input_all       = $(this).parents('.ncsc-province-list').find('.J_Province').size();
            if (input_all == input_checked){
                $(this).parents('.ncsc-region').find('.J_Group').prop('checked',true);
            }
        }
    });
    
    /*  选择完区域后，确定事件*/
    $('.bottom').on('click','#J_Submit',function (){
        var CityText = '', CityText2 = '', CityValue = '';
        //记录已选择的所有省及市的value，SelectArea下标为value值，值为true，如江苏省SelectArea[320000]=true,南京市SelectArea[320100]=true
//      SelectArea = new Array();
        //取得已选的省市的text，返回给父级窗口，如果省份下的市被全选择，只返回显示省的名称，否则显示已选择的市的名称
        //首先找市被全部选择的省份
        $('#J_areas').find('.ncsc-province-tab').each(function(){
            var a = $(this).find('input[type="checkbox"]').size();
            var b = $(this).find('input:checked').size();
            //市被全选的情况
            if (a == b){
                CityText += ($(this).find('.J_Province').next().html())+',';
            }else{
                //市被部分选中的情况
                $(this).find('.J_City').each(function(){
                    //计算并准备传输选择的区域值（具体到市级ID），以，隔开
                    if ($(this).prop('checked')){
                        CityText2 += ($(this).next().html())+',';
                    }else{
                        $(this).siblings('.ncsc-citys-sub-area').find('.J_Zone').each(function(){
                            if ($(this).prop('checked')){
                                CityText2 += ($(this).next().html())+',';
                            }
                        })
                    }
                });
            }
        });
        CityText += CityText2;

        //记录弹出层内所有已被选择的checkbox的值(省、市均记录)，记录到CityValue，SelectArea中
        $('#J_areas').find('.ncsc-province-list').find('input[type="checkbox"]').each(function(){
            if ($(this).prop('checked')){
                CityValue += $(this).val()+',';
            }
        });
        //去掉尾部的逗号
        CityText = CityText.replace(/(,*$)/g,'');
        CityValue = CityValue.replace(/(,*$)/g,'');

        //返回选择的文本内容
        if (CityText == '')CityText = '未添加地区';
        $('#'+curIndex).find('.area-group>span').html(CityText);
        //返回选择的值到隐藏域
        $('input[name="ids['+curIndex.substring(1)+']"]').val(CityValue);
        $('input[name="areas['+curIndex.substring(1)+']"]').val(CityValue+'|||'+CityText);
        //关闭弹出层与遮罩层
        close();
        return false;
    });
    
    
});
</script>